<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/login.png" height="100px" width="100px">
    <div class="container">
      <form class="form-signin" method="post" :action="url">
        <h2 class="form-signin-heading">登陆</h2>
        <div class="form-control">

          <div class="user">
            <el-tag effect="plain">Username</el-tag>
          </div>
            <el-input v-model = username  prefix-icon="el-icon-user"  type="text" id="username" name="username" placeholder="用户名" required autofocus></el-input>
          <br>
          <br>
          <div class="user">
            <el-tag effect="plain">Password</el-tag>
          </div>
            <el-input v-model = password  prefix-icon="el-icon-edit"  show-password type="password" id="password" name="password" placeholder="密码" required></el-input>
          <p>
            自动登陆：
            <el-switch v-model="rememberMe"></el-switch>
            <!--          <input v-model="rememberMe" type="checkbox"  name="remember-me"> 自动登陆-->
          </p>
        </div>
<!--        <button class="btn btn-lg btn-primary btn-block">登陆</button>-->
        <br>
        <el-button type="primary" plain  @click="login" value="login">登陆</el-button>
      </form>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { loginUrl, indexUrl } from '@/api/login.js'
export default {
  name: 'Home',
  components: {
  },
  data () {
    return {
      url: loginUrl,
      username: '',
      password: '',
      rememberMe: ''
    }
  },
  methods: {
    open3 () {
      this.$message({
        message: '警告哦，这是一条警告消息',
        type: 'warning'
      });
    },
    login () {
      var me = this;

      var username = me.username;
      // eslint-disable-next-line eqeqeq
      if (username == null || username == undefined || username == '') {
        this.$message({
          message: '警告哦，用户名不能为空',
          type: 'warning'
        });
      }
      var password = me.password;
      // eslint-disable-next-line eqeqeq
      if (password == null || password == undefined || password == '') {
        this.$message({
          message: '警告哦，密码不能为空',
          type: 'warning'
        });
        return;
      }
      const fd = new FormData();
      fd.append('username', username)
      fd.append('password', password)
      // 服务端用户名密码登录认证
      var serverUrl = this.url;
      // 发起请求调用短信发送接口
      // axios.defaults.withCredentials = true;
      this.$axios.post(serverUrl, fd, {
        headers: {
          'Content-Type': 'multipart/form-data' // hearder 很重要，Content-Type 要写对
        }
      })
        .then(res => {
          // console.log(res)
          // eslint-disable-next-line eqeqeq
          if (res.data.code === 20000) {
            // TODO 用户名称在 res.data.data.name 在这里存入cookie
            this.$cookies.set('username', res.data.data.name)
            this.$message({
              message: '恭喜你，登陆成功, 正在跳转',
              type: 'success'
            });
            setTimeout({}, 2000)
            // 登录成功，跳转到admin首页
            window.location = indexUrl;
          } else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            });
          }
        });
    }
  },
  mounted () {
    // 防止submit原生提交事件
    var form = document.getElementsByTagName('form')[0];
    form.addEventListener('submit', function (e){
      e.preventDefault()
    })
  }
}
</script>

<style lang="less">
  body{
    margin: 0 auto;
  }
  .logo{
    width: 100px;
    height: 100px;
  }
  .form-control{
    width: 400px;
    display: inline-block;
    .user{
      margin-right: 400px;
    }
    p {
      .sr-only{
        display: inline;
      }
    }
  }
</style>
